<template>
  <div class="box">
    <div class="main">
      <!-- 搜索 -->
      <div class="search">
        <div class="s-left">
          <div class="left">
            <span>工单编号:</span>
            <el-input
              class="input"
              v-model="input"
              placeholder="请输入"
            ></el-input>
          </div>
        </div>
        <div class="s-right">
          <div class="right">
            <span>工单状态:</span>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </div>
        </div>
      </div>
      <!-- 主体 -->
      <div class="result">
        <div class="r-title">
          <!-- 放置表格和分页 -->
          <el-row>
            <el-button type="primary" icon="el-icon-circle-plus"
              ><span>新建</span></el-button
            >
            <el-button plain>工单配置</el-button>
          </el-row>
          <div class="r-body">
            <template>
              <el-table
                class="b-table"
                :data="list"
                style="width: 100%; height: 482px"
              >
                <!-- type='index' 序号 -->
                <el-table-column fixed type="index" label="序号" width="80">
                </el-table-column>
                <el-table-column
                  fixed
                  prop="taskCode"
                  label="工单编号"
                  width="132"
                >
                </el-table-column>
                <el-table-column prop="innerCode" label="设备编号" width="132">
                </el-table-column>
                <el-table-column
                  prop="taskType.typeName"
                  label="工单类型"
                  width="132"
                >
                </el-table-column>
                <el-table-column prop="createType" label="工单方式" width="132">
                </el-table-column>
                <el-table-column
                  prop="taskStatusTypeEntity.statusName"
                  label="工单状态"
                  width="132"
                >
                </el-table-column>
                <el-table-column prop="userName" label="运营人员" width="132">
                </el-table-column
                ><el-table-column
                  prop="createTime"
                  label="创建日期"
                  width="160"
                >
                </el-table-column
                ><el-table-column prop="zip" label="操作" width="100">
                  <a
                  @click="looklist"
                    href=""
                    class="b-color"
                    style="color: #5f84ff; text-decoration: none"
                    >查看详情</a
                  >
                </el-table-column>
              </el-table>
            </template>
            <!-- 分页 -->
            <div class="footer">
              <div class="text">
                <div>
                  <span>共{{ total }}条记录 第1/{{totalPage}}页</span>
                </div>
                <button @click="up">上一页</button>
                <button @click="down">下一页</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--  -->
</template>

<script>
import { getWorkorder, getWorkStatus, getWorkType } from "@/api/workorder";
export default {
  name: "DikedeIndex",

  data() {
    return {
      params: {
        page: 1,
        size: 10,
        pageIndex: 1,
        pageSize: 10,
        isRepair: "",
      },
      list: [],
      total: 0,
      loading: false,
      input: "",
      options: [
        {
          value: "选项1",
          label: "待办",
        },
        {
          value: "选项2",
          label: "进行",
        },
        {
          value: "选项3",
          label: "取消",
        },
        {
          value: "选项4",
          label: "完成",
        },
      ],
      value: "",
      statusName: "",
      total: 0,
      pageIndex:0,
      totalPage:0
    };
  },

  mounted() {
    this.getWorkorder();
    this.getWorkStatus();
    this.getWorkType();
  },

  methods: {
    // 工单列表
    async getWorkorder() {
      const { currentPageRecords, totalCount ,totalPage } = await getWorkorder(this.params);
      const res = await getWorkorder(this.params);
      console.log(res);
      console.log(res.pageIndex);

      this.list = currentPageRecords;
      this.total = totalCount;
      this.totalPage = totalPage
    },
    // 工单状态
    async getWorkStatus() {
      const res = await getWorkStatus();
      console.log(res);
    },
    // 工单类型
    async getWorkType() {
      const res = await getWorkType();
      console.log(res);
    },
    // 上下页
   async  up() {
      const res = await getWorkorder();
    //   const {pageIndex} = await getWorkorder();
      console.log(res.pageIndex);
    //   this.currentPageRecords = res.pageIndex

    },
   async  down() {
    const res = await getWorkorder(this.params);
      console.log(res.pageIndex);
    },
    // 查看详情列表
    looklist(){

    }
  },
};
</script>

<style lang="less">
.box {
  width: 1199px;
  height: 797px;
  background-color: #e2dfdf;
  .main {
    width: 1159px;
    height: 100%;
    padding: 20px;
    .search {
      display: flex;
      height: 64px;
      padding-left: 17px;
      margin-bottom: 20px;
      background-color: #fff;
      line-height: 64px;
      border-radius: 5px;
      .s-left,
      .s-right {
        // width: 275px;
        span {
          font-size: 14px;
          color: #606266;
          padding-right: 12px;
        }
        .input {
          width: 175px;
          height: 34px !important;
          padding-right: 30px !important;
        }
        .el-button--primary {
          min-width: 80px;
          height: 36px;
          background-color: #5f84ff;
          margin-left: 10px;
        }
      }
      .el-select .el-input__inner {
      }
    }
    .result {
      background-color: #fff;
      width: 1127px;
      height: 634px;
      padding: 20px 15px 19px 17px;
      border-radius: 5px;
      .r-title {
        height: 36px;
        text-align: left;

        .el-row {
          margin-bottom: 20px;
        }
        .el-button--primary {
          background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
          height: 36px;
          border-radius: 5px;
          border: 0;
        }
        .el-button + .el-button {
          height: 36px;
        }
      }
      .r-body {
        height: 482px;
        width: 100%;
        .el-table--border::after,
        .el-table--group::after,
        .el-table::before {
          background-color: #fff !important;
        }
        .el-table__fixed-right::before,
        .el-table__fixed::before {
          background-color: #fff !important;
        }
        .el-table--scrollable-x .el-table__body-wrapper {
          overflow-x: hidden !important;
        }
        .footer {
          height: 32px;
          background-color: #fff;
          padding: 32px 16px;
          .text {
            display: flex;
            font-size: 16px;
            color: #dbdfe5;
            div {
              width: 881px !important;
            }
            button {
              width: 70px;
              height: 32px;
              margin: 0 16px;
              border-radius: 2px;
              background-color: #d5ddf8;
              border: 0;
              color: #606266;
            }
          }
        }
      }
    }
  }
}
</style>
